<template>
    <div class="login-container">
        <div class="login-body">
            <div class="login-title">社团管理系统</div>
            <div class="login-form">
                <el-form :model="loginForm" :rules="rules" ref="loginForm">
                    <el-form-item prop="userName">
                        <el-input type="text" v-model="loginForm.userName" suffix-icon="iconfont icon-r-user1"
                            placeholder="请输入您的账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="passWord">
                        <el-input type="password" v-model="loginForm.passWord" suffix-icon="iconfont icon-r-lock"
                            placeholder="请输入您的密码">

                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="
                                margin-top: 15px;
                                width: 100%;
                                background-color: #6495ed;
                                
                            " @click="submitForm('loginForm')" type="primary">
                            <b style="font-size: 22px;"> 用户登录</b></el-button><br />
                        <el-button style="width: 100%; margin-top: 5px" @click="showAddWin()" :underline="false"
                            type="info">
                            <b style="font-size: 22px;"> 注册新账号</b></el-button><br />
                            <el-button 
                        style="width: 100%; margin-top: 5px" 
                        @click="showEmailLoginDialog()" 
                        :underline="false"
                        type="success">
                        <b style="font-size: 22px;"> 邮箱登录</b>
                        </el-button>

                    </el-form-item>
                </el-form>
            </div>
        </div>

        <el-dialog title="用户注册" width="700px" :modal="false" :visible.sync="showAddFlag"   :close-on-click-modal="false"
        :close-on-press-escape="false">
            <el-form label-width="90px" :model="usersForm">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="用户账号">
                            <el-input v-model="usersForm.userName" placeholder="请输入用户账号…" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户密码">
                            <el-input v-model="usersForm.passWord" type="password" placeholder="请输入用户密码…"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="用户姓名">
                            <el-input v-model="usersForm.name" placeholder="请输入用户姓名…" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户年龄">
                            <el-input v-model="usersForm.age" placeholder="请输入用户年龄…" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-radio-group v-model="usersForm.gender">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱号">
                            <el-input v-model="usersForm.email" placeholder="请输入邮箱号…" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="联系地址">
                    <el-input rows="4" type="textarea" v-model="usersForm.address" placeholder="请输入联系地址…"
                        autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showAddFlag = false" style="font-size: 18px"> 取 消</el-button>
                <el-button type="primary" @click="addInfo()" style="font-size: 18px"> 确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog 
    title="邮箱登录" 
    width="700px" 
    :modal="false" 
    :visible.sync="showEmailLoginFlag"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    
    <el-form label-width="90px" :model="emailLoginForm">
        <el-form-item label="邮箱地址">
            <el-input v-model="emailLoginForm.email" placeholder="请输入邮箱地址…" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="验证码">
  <div style="display: flex; align-items: center;">
    <el-input 
      v-model="emailLoginForm.code" 
      placeholder="请输入验证码…" 
      autocomplete="off" 
      style="flex: 1;"
    ></el-input>
    <el-button 
      type="success" 
      style="margin-left: 10px; font-size: 16px; white-space: nowrap;"
      @click="sendVerificationCode()">
      发送验证码
    </el-button>
  </div>
</el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
        <el-button @click="showEmailLoginFlag = false" style="font-size: 18px"> 取 消</el-button>
        <el-button type="primary" @click="submitEmailLogin()" style="font-size: 18px"> 登 录</el-button>
    </div>
</el-dialog>
    </div>
</template>

<style>
.login-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: url("../assets/back.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    /* background-color: #b0c4de; */
    /* background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); */
}

.login-win {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 300px;
    padding: 15px;
    border-radius: 5px;
    background-size: cover;
}

.login-body {
    padding: 30px 40px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 20px;
    border: 2px solid #6495ed;
    opacity: 0.9;
}

.login-title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #6495ed;
    margin-bottom: 35px;
}
</style>

<script>
import initMenu from "../utils/menus.js";
import { login, addUsers,sendEmailVerificationCode,emailLogin } from "../api/index.js";
export default {
    data() {
        return {
            showEmailLoginFlag:false,
            showAddFlag: false,
            usersForm: {
                id: "",
                userName: "",
                passWord: "",
                name: "",
                gender: "",
                age: "",
                email: "",
                address: "",
                type: 2,
                status: 1,
            },
            emailLoginForm: { // 新增
                email: "",
                code: ""
            },
            loginForm: {
                userName: "",
                passWord: "",
            },
            rules: {
                email: [
        { required: true, message: '邮箱必须输入', trigger: 'blur' },
        { 
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, 
            message: '请输入正确的邮箱格式', 
            trigger: 'blur' 
        }
    ],
                userName: [
                    {
                        required: true,
                        message: "用户账号必须输入",
                        trigger: "blur",
                    },
                ],
                passWord: [
                    {
                        required: true,
                        message: "用户密码必须输入",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        sendVerificationCode() {
    const email = this.emailLoginForm.email;

    if (!email) {
        this.$message({
            message: "请先填写邮箱地址",
            type: "warning"
        });
        return;
    }

    // 调用 API 发送验证码
    sendEmailVerificationCode(this.emailLoginForm.email)
        .then((res) => {
            this.$message({
                message: "验证码已发送，请查收邮件",
                type: "success"
            });
        })
        .catch(() => {
            this.$message({
                message: "验证码发送失败，请重试",
                type: "error"
            });
        });
},
        submitEmailLogin() {
    if (this.emailLoginForm.email.trim() == '') {
        this.$message({
            message: "请填写邮箱地址",
            type: "warning"
        });
        return;
    }

    if (this.emailLoginForm.code.trim() == '') {
        this.$message({
            message: "请填写验证码",
            type: "warning"
        });
        return;
    }

    // 调用 API 进行邮箱登录
    emailLogin(this.emailLoginForm)
        .then((res) => {
            this.$store.commit("setToken", res.data);
            sessionStorage.setItem("token", res.data);
            initMenu(this.$router, this.$store);
            this.$router.push("/index");
        })
        .catch(() => {
            this.$message({
                message: "邮箱或验证码错误",
                type: "error"
            });
        });
},
        showEmailLoginDialog() {
            this.showEmailLoginFlag = true;
        },
        showAddWin() {
            this.showAddFlag = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    login(this.loginForm)
                        .then((res) => {
                            console.log("login",res);
                            
                            if(res.code == 0){
                                this.$message({
                                    message: "登录成功",
                                    type: "success"
                                });
                                this.$store.commit("setToken", res.data.id);
                                sessionStorage.setItem("token", res.data.id);
                                initMenu(this.$router, this.$store);
                                this.$router.push("/index");
                            }else{
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        })
                } else {
                    return false;
                }
            });
        },
        addInfo() {
            if (this.usersForm.userName.trim() == '') {
                this.$message({
                    message: "请填写账号",
                    type: "warning",
                });
                return;
            }
            if (this.usersForm.passWord.trim() == '') {
                this.$message({
                    message: "请填写密码",
                    type: "warning",
                });
                return;
            }
            if (this.usersForm.name.trim() == '') {
                this.$message({
                    message: "请填写姓名",
                    type: "warning",
                });
                return;
            }
            if (this.usersForm.age.trim() == '') {
                this.$message({
                    message: "请填写年龄",
                    type: "warning",
                });
                return;
            }
            if (this.usersForm.gender.trim() == '') {
                this.$message({
                    message: "请选择性别",
                    type: "warning",
                });
                return;
            }

            if (this.usersForm.address.trim() == '') {
                this.$message({
                    message: "请填写地址",
                    type: "warning",
                });
                return;
            }
            

            addUsers(this.usersForm).then((resp) => {
                if (resp.code == 0) {
                    this.$confirm("注册成功, 立即登陆?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        login({
                            userName: this.usersForm.userName,
                            passWord: this.usersForm.passWord,
                        }).then((res) => {
                            this.$store.commit("setToken", res.data.id);
                            sessionStorage.setItem("token", res.data.id);
                            initMenu(this.$router, this.$store);
                            this.$router.push("/index");
                        });
                    });
                } else {
                    this.$message({
                        message: resp.msg,
                        type: "warning",
                    });
                }
            });
        },
    },
    mounted() {

    }
};
</script>